<template>
  <header>
    <Card>
      <section class="mine_header">
        <van-image round width="56px" height="56px" :src="info?.avatar"  v-if="info?.avatar"/>
        <section class="mine_header_info">
          <section class="mine_header_info_name">用户名：{{ info?.nickname }}</section>
          <section class="mine_header_info_desc">生日：{{ info?.birthday }}</section>
        </section>
      </section>
    </Card>
  </header>
  <main>
    <van-cell-group inset>
      <van-cell title="我的植物" is-link to="/my/plant" />
      <van-cell title="我的收藏" is-link to="/my/collect" />
      <van-cell title="个人中心" is-link to="/center" />
      <van-cell title="修改密码" is-link to="/password" />
      <van-cell title="注销账号" is-link  @click="handleLogout"/>
      <van-cell title="退出登录" is-link  @click="handleQuit"/>
    </van-cell-group>
  </main>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, showConfirmDialog } from 'vant';
import Card from '@/components/Card/index.vue';
import { getUserInfo,userLogout } from '@/apis/user';

const router = useRouter();

const info = ref({});

const init = async () => {
  try {
    const { data = {} } = await getUserInfo();
    info.value = data;

  } catch (error) {
    console.log(error, 'init-userInfo-error')
  }
};

const handleLogout = () => {
  showConfirmDialog({
    title: `确定要注销账号吗？`,
    message: '注销账号后，所有数据将被清除',
    confirmButtonText: '注销',
    cancelButtonText: '取消',
    confirmButtonColor:"#f50"
  })
    .then( async() => {
      try {
        const res = await userLogout(info.value?.id);
        if (res.code === 200) {
          showToast('注销账号成功');
          localStorage.clear();
          router.push('/')
        } else {
          showToast(res.msg);
        }
      } catch (error) {
        console.log(error, 'logout-error');

      }
    })
    .catch(() => {

    });
};

const handleQuit = () => {
  showConfirmDialog({
    title: `确定要退出登录吗？`,
  })
    .then(() => {
      showToast('退出登录成功');
      localStorage.clear();
      router.push('/')
    })
    .catch(() => {

    });
};


onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
header {
  width: 94%;
  margin: 0 auto;
}

.mine {
  &_header {
    width: 98%;
    box-sizing: border-box;
    padding: 8px;
    display: flex;
    align-items: center;

    &_info {
      width: 200px;
      margin-left: 16px;
      font-size: 14px;
      color: #333;
    }
  }
}

main {
  margin-top: 8px;
}
</style>
